<template>
    <div class="container">
        <!-- 患者信息查询标题 -->
        <span class="title">患者信息查询</span>
        
        <!-- 病历号搜索行 -->
        <el-row :gutter="2" class="search-row">
            <el-col :span="4">
                <div class="grid-content">
                    <span class="required">*</span>
                    <span class="label">病 历 号 :</span>
                    <el-input 
                        placeholder="请输入病历号" 
                        style="width: 110px" 
                        align="left" 
                        v-model="keywords"
                        @keyup.enter="handleSearch" 
                        clearable
                    ></el-input>
                </div>
            </el-col>

            <el-col :span="5">
                <div class="grid-content">
                    <el-button 
                        type="primary" 
                        style="margin-left: 3px"
                        @click="handleSearch"
                        :disabled="!keywords" 
                    >
                        <el-icon><Search /></el-icon> 搜索
                    </el-button>
                </div>
            </el-col>
        </el-row>

        <br>
        <!-- 患者信息确认标题 -->
        <span class="title">患者信息确认</span>

        <!-- 患者基本信息展示 -->
        <template v-if="hasPatientInfo">
            <el-row :gutter="2" class="info-row">
                <el-col :span="4">
                    <div class="grid-content">
                        <span class="label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
                        <el-input 
                            placeholder="姓名" 
                            style="width: 110px" 
                            align="left" 
                            readonly
                            v-model="info.realname"
                        ></el-input>
                    </div>
                </el-col>

                <el-col :span="7">
                    <div class="grid-content">
                        <span class="label">身份证号:</span>
                        <el-input 
                            placeholder="身份证号" 
                            style="width: 180px" 
                            readonly
                            v-model="info.idnumber"
                        ></el-input>
                    </div>
                </el-col>

                <el-col :span="9">
                    <div class="grid-content">
                        <span class="label">家庭住址:</span>
                        <el-input 
                            placeholder="家庭住址" 
                            style="width: 330px" 
                            readonly
                            v-model="info.address"
                        ></el-input>
                    </div>
                </el-col>
            </el-row>
        </template>

        <!-- 患者消费信息表格区域 -->
        <el-main class="table-container">
            <span class="title">患者消费信息</span>
            
            <!-- 消费信息表格 -->
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange" 
                v-loading="loading"
                stripe 
                border 
                highlight-current-row
                empty-text="暂无数据，请先搜索患者信息"
            >
                <!-- 选择列：仅允许选择“开立未收费”（status=1）的项目 -->
                <el-table-column
                    type="selection"
                    width="55" 
                    align="left"
                    :selectable="row => row.status === 1"  
                ></el-table-column>

                <!-- 病历号列 -->
                <el-table-column
                    label="病历号"
                    prop="medicalId"
                    width="120" 
                    align="left"
                ></el-table-column>

                <!-- 项目名称列 -->
                <el-table-column
                    label="项目名称"
                    prop="itemName"
                    width="120" 
                    align="left"
                ></el-table-column>

                <!-- 单价列 -->
                <el-table-column
                    label="单价(元)"
                    prop="price"
                    width="120" 
                    align="left"
                >
                    <template #default="scope">
                        {{ formatNumber(scope.row.price) }}
                    </template>
                </el-table-column>

                <!-- 数量列 -->
                <el-table-column
                    label="数量"
                    prop="num"
                    width="80"    
                    align="left"
                ></el-table-column>

                <!-- 开立时间列 -->
                <el-table-column
                    label="开立时间"
                    prop="createTime"
                    width="180" 
                    align="left"
                >
                    <template #default="scope">
                        {{ formatDate(scope.row.createTime) }}
                    </template>
                </el-table-column>

                <!-- 状态列（核心修改：使用status字段和新状态文本） -->
                <el-table-column
                    label="状态"
                    prop="status"
                    width="120" 
                    align="left"
                >
                    <template #default="scope">
                        <el-tag 
                            :type="getStatusTagType(scope.row.status)" 
                            size="small"
                        >
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                
                <!-- 金额小计列 -->
                <el-table-column
                    label="小计(元)"
                    width="120"
                    align="left"
                >
                    <template #default="scope">
                        {{ formatNumber(scope.row.price * scope.row.num) }}
                    </template>
                </el-table-column>
            </el-table>

            <br>
            
            <!-- 底部操作按钮区域 -->
            <div class="footer-actions">
                <div class="total-amount" v-if="totalAmount > 0">
                    合计金额: {{ formatNumber(totalAmount) }}元
                </div>
                
                <el-button 
                    type="primary" 
                    icon="el-icon-goods"
                    style="margin-top: 10px;width: 120px;"
                    @click="handleCharge" 
                    :disabled="!canCharge" 
                >
                    收费结算
                </el-button>
            </div>
        </el-main>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import service from '@/utils/request'

// 响应式数据
const keywords = ref('')      // 搜索关键字(病历号)
const tableData = ref([])     // 患者消费信息表格数据
const info = ref({
    realname: '',           // 患者姓名
    idnumber: '',           // 身份证号
    address: ''             // 家庭住址
})    
const selItems = ref([])      // 表格中选择的行数据
const loading = ref(false)    // 表格加载状态
const registrationId = ref(null) // 存储registrationId用于接口调用

/**
 * 格式化日期显示
 */
function formatDate(dateStr) {
    if (!dateStr) return ''
    try {
        const date = new Date(dateStr)
        return date.toLocaleString()
    } catch (error) {
        console.error('日期格式化失败:', error)
        return dateStr
    }
}

/**
 * 格式化数字为两位小数
 */
function formatNumber(num) {
    if (typeof num !== 'number') {
        num = parseFloat(num) || 0
    }
    return num.toFixed(2)
}

/**
 * 根据状态值获取标签类型（核心修改：适配新状态）
 * @param {number} status - 状态值（1-4）
 * @returns {string} 标签类型（element-plus的tag类型）
 */
function getStatusTagType(status) {
    const typeMap = {
        1: 'warning',  // 开立未收费：警告色（黄色）
        2: 'primary',  // 收费未检验：主要色（蓝色）
        3: 'info',     // 检验未确诊：信息色（浅蓝色）
        4: 'success'   // 确诊：成功色（绿色）
    }
    return typeMap[status] || 'info'
}

/**
 * 根据状态值获取显示文本（核心修改：更新状态描述）
 * @param {number} status - 状态值（1-4）
 * @returns {string} 状态文本
 */
function getStatusText(status) {
    const textMap = {
        1: '开立未收费',
        2: '收费未检验',
        3: '检验未确诊',
        4: '确诊'
    }
    return textMap[status] || '未知状态'
}

/**
 * 表格选择项变化事件
 */
function handleSelectionChange(selection) {
    selItems.value = selection
}

/**
 * 搜索患者信息
 */
 async function handleSearch() {
    if (!keywords.value.trim()) {
        ElMessage.warning('请输入病历号')
        return
    }
    
    loading.value = true
    try {
        // 1. 查询患者基本信息，获取registrationId
        const patientRes = await service.get("/registration/checkCaseNumber", {
            params: { caseNumber: keywords.value.trim() }
        })
        
        if (!patientRes || !patientRes.id) {
            ElMessage.info('未查询到患者信息')
            tableData.value = []
            info.value = { realname: '', idnumber: '', address: '' }
            return
        }

        // 2. 保存患者基本信息
        info.value = {
            realname: patientRes.patientName || '',
            idnumber: patientRes.idNumber || '',
            address: patientRes.address || ''
        }
        registrationId.value = patientRes.id  // 提取registrationId

        // 3. 调用/examApp/list获取项目信息（关键修改：直接使用examRes）
        const examRes = await service.get("/examApp/list", {
            params: { registrationId: registrationId.value }
        })

        // 4. 处理项目数据：按项目名称合并数量
        if (Array.isArray(examRes)) { // 直接判断examRes是否为数组
            const mergedMap = new Map()
            examRes.forEach(item => { // 直接遍历examRes
                const key = item.itemName
                if (mergedMap.has(key)) {
                    // 合并相同项目的数量
                    const existing = mergedMap.get(key)
                    mergedMap.set(key, {
                        ...existing,
                        num: existing.num + (item.num || 1)
                    })
                } else {
                    // 初始化项目数据
                    mergedMap.set(key, {
                        medicalId: patientRes.caseNumber || '',
                        itemName: item.itemName,
                        price: item.price || 0,
                        num: item.num || 1,
                        createTime: item.createTime,
                        status: item.status || 1
                    })
                }
            })
            tableData.value = Array.from(mergedMap.values())
        } else {
            tableData.value = []
            ElMessage.info('未查询到相关检查项目')
        }

    } catch (err) {
        console.error('查询失败:', err)
        ElMessage.error(`查询失败: ${err.message || '网络错误'}`)
        tableData.value = []
    } finally {
        loading.value = false
    }
}

/**
 * 收费结算操作（仅处理status=1的项目）
 */

async function handleCharge() {
    if (selItems.value.length === 0) {
        ElMessage.warning('请选择要收费的项目（仅“开立未收费”项目可选择）')
        return
    }
    
    try {
        await ElMessageBox.confirm(
            `确定要对 ${selItems.value.length} 个项目进行收费，合计 ${formatNumber(totalAmount.value)} 元吗?`,
            '收费确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        // 关键修改：将参数作为查询参数传递
        await service.post(
            "examApp/updateStatus", 
            null,  // 不传递请求体
            {
                params: {  // 通过params选项传递查询参数
                    registrationId: registrationId.value,
                    status: 2
                }
            }
        )
        await service.post(
            "registration/status", 
            null,
            {
                params: {  
                    registrationId: registrationId.value,
                    status: 2
                }
            }
        )
        
        ElMessage.success('收费成功，项目状态已更新为“收费未检验”')
        handleSearch()  // 刷新数据
    } catch (err) {
        if (err.toString() !== 'Cancel') {
            ElMessage.error(`收费失败: ${err.message || '操作异常'}`)
        }
    }
}

/**
 * 计算属性：是否有患者信息
 */
const hasPatientInfo = computed(() => {
    return Object.values(info.value).some(v => v !== '')
})

/**
 * 计算属性：是否可以收费（仅当选中“开立未收费”项目时可收费）
 */
const canCharge = computed(() => {
    return selItems.value.length > 0 && 
           selItems.value.every(item => item.status === 1)
})

/**
 * 计算属性：选中项目的总金额（仅计算status=1的项目）
 */
const totalAmount = computed(() => {
    return selItems.value
        .filter(item => item.status === 1)
        .reduce((sum, item) => sum + (Number(item.price) * Number(item.num)), 0)
})

onMounted(() => {
    // 初始化逻辑
})
</script>

<style scoped>
/* 样式保持不变 */
.container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title {
    font-size: 15px;
    font-family: 'Microsoft YaHei';
    display: inline-block;
    margin-bottom: 10px;
}
.search-row, .info-row {
    margin-bottom: 15px;
}
.grid-content {
    display: flex;
    align-items: center;
    min-height: 36px;
}
.required {
    color: red;
    margin-right: 5px;
}
.label {
    font-size: 13px;
    font-family: 'Microsoft YaHei';
    margin-right: 8px;
    white-space: nowrap;
}
.table-container {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}
.el-table {
    margin-top: 10px;
}
.el-tag {
    margin-right: 5px;
}
.footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.total-amount {
    font-weight: bold;
    color: #f56c6c;
    font-size: 14px;
}
</style>